<template>
<div style="margin: 0 auto;width: 1000px;display: flex">

      <div class="main-div">
       <!-- 左侧内容 -->
<!--        <div class="text-left">
          <section class="left-item" style="margin-top: 180px" >
            <h3 class="left-tit">账户设置<span class="caret"></span></h3>
            <ul class="left-list" style="display: block;">
              <br>
              <li><a id="li8" href="/userDetail" class="active">个人资料</a></li>
              <li><a id="li9" href="" >修改密码</a></li>


            </ul>
          </section>
        </div>-->
       <!-- 右侧头部 -->
        <div class="right-title" style="margin-top: 10px">
          <h3 style="text-align: center">个人资料</h3>
          <div class="right-bottom">
            <div class="avatar-upload">
              <div class="avatar-pic" id="avatar-box" style="cursor:pointer">
                <div class="demo-image__preview">
                  <el-image
                      style="width: 100px; height: 100px;margin-left: 50px"
                      :src="user.avatar"
                      :preview-src-list="srcList">
                  </el-image>
                </div>
              </div>




              <div style="text-align:center;margin-top:20px;position:relative;margin-left: 50px">

                <el-upload
                    action="http://localhost:9202/resources/upload/image/product"
                    class="picture-uploader"
                    :on-success="handleUploadSuccess">
                  <el-button type="primary" round @click="">更换头像</el-button>
                </el-upload>
                <div id="html5_1h33hpsd23io1dvpcdi1bo91a3a3_container" class="moxie-shim moxie-shim-html5" style="position: absolute; top: 0px; left: 449px; width: 82px;
                height: 34px; overflow: hidden; z-index: 0;"><input id="html5_1h33hpsd23io1dvpcdi1bo91a3a3" type="file" style="font-size: 999px; opacity: 0;
                position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" accept="image/jpeg,.jpg,image/png,.png,.jpeg"></div></div>
              <br>
              <p style="padding-bottom: 0px;margin-left: 50px">支持JPG、JPEG、PNG格式 / 大小不超过5M</p>
              <input id="AvatarKey" name="Avatar" type="hidden" value="//cdn-static.uoko.com/global/user/default-male-avatar.png">
            </div>
          </div>
          <div style="margin-top: 50px;margin-left: 50px">
            <el-divider content-position="center">完善以下信息，你可以获得更多优质房源</el-divider>
          </div>
        </div>

        <div class="right-xia">
          <el-form  label-width="auto" :model="user" ref="user" :rules="rules" style="text-align:left;width: 500px;"inline-message>
            <el-form-item label="用户名" prop="username">
              <el-input v-model="user.username">
              </el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input v-model="user.password">
              </el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="user.nickname">
              </el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phoneNumber">
              <el-input v-model="user.phoneNumber">
              </el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="user.email">
              </el-input>
            </el-form-item>
            <el-form-item style="text-align: center;position: relative;right: 50px;">
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button @click="backIndex">返回</el-button>
            </el-form-item>
          </el-form>
        </div>




      </div>


</div>
</template>

<script>
export default {
  data() {
    return {
      user:{
        username: '',
        password: '',
        nickname: '',
        phoneNumber: '',
        email: ''
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'change'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'change'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'change'},
          {min: 4, max: 15, message: '长度在 4 到 15 个字符', trigger: 'change'}
        ],
        nickname: [
          {required: true, message: '请输入名称', trigger: 'change'},
          {min: 1, max: 15, message: '长度在 1 到 15 个字符', trigger: 'change'}
        ],
        phoneNumber: [
          {required: true, message: '请输入手机号码', trigger: 'change'},
          {len: 11,message: '电话号码格式错误',trigger: 'change'}
        ],
        email: [
          {required: true, message: '请输入邮箱地址', trigger: 'change'},
          {pattern:/^[\w.-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,message: '请输入正确的邮箱',trigger: 'change'}
        ]
      },
      srcList: []
    };
  },
  methods: {
    backIndex() {
      this.$router.push('/');
    },
    onSubmit() {
      let url = 'http://localhost:9200/user/update';
      console.log('url = ' + url);
      let formData = this.qs.stringify(this.user);
      console.log('formData = ' + formData);
      this.axios.post(url, formData).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            showClose: true,
            message: '修改信息成功！',
            type: 'success'
          });
          this.loadUserDetail();
        } else {
          this.$alert(jsonResult.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    },

    handleUploadSuccess(file){
      console.log("file",file)
        this.user.avatar = file.data.url;
     /* console.log("avatar",data.avatar);
      let url = 'http://localhost:9200/user/update';
      console.log('url = ' + url);
      let formData = this.qs.stringify(data);
      console.log('formData = ' + formData);

      this.axios.post(url, formData).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.loadUserDetail();
        } else {
          this.$alert(jsonResult.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });*/
    },

    loadUserDetail(){
      let url = 'http://localhost:9200/user/standard';
      console.log('url = ' + url);

      this.axios
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.user = jsonResult.data;
          this.srcList.push(this.user.avatar);
          console.log("图片放大",this.srcList)
        }
      });
    }
  },
  mounted() {
    this.loadUserDetail()
  }
}
</script>

<style>
.el-form-item {
  margin-bottom: 20px;
}
li{
  font-size: 10px;
  line-height: 60px;
}
a{
  color: #ffffff;
}
.el-card__body, .el-main {
  padding: 0px;
}
.main-div {
  width: 100%;
  height: 1000px;
  margin: 0;
  padding-top: 0px !important;
}
.el-form-item__content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
  height: 10px;
}
.left-tit{
  font-size: 18px;
  color: #fff;
  margin-top: 10px;
  display: block;
}
.right-title{
  width: 800px;
  height: 300px;
  float: left;
  display: inline-block;

}
.right-bottom{
  padding-top: 50px;

}
.right-xia{
  border: 0px red solid;
  width: 500px;
  height: 500px;
  margin-left: 200px;
  margin-top: 450px;
  line-height: 50px;

}
.right-title h3{
  text-align: left;
  line-height: 40px;
  width:800px;
  height: 40px;
  font-size: 18px;
  font-weight: 700;
  border-radius: 8px;
  padding-left: 20px;
  background-color: #f4f6f9;

}
.text-left{
  margin-right: 20px;
  width:170px;
  height: 700px;
  border-radius: 8px;
  background-color: #00b4aa;
  float: left;
  display: inline-block
}

.main-div{

  width: 100%;
  height: 1000px;
  margin: 0;
  padding-top: 10px;
}

</style>